<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黄鹤楼</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #videoContainer {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background: black;
        }
        #myVideo {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    </style>
</head>
<body>
<div id="videoContainer">
    <video id="myVideo" controls poster="/stamp/sp/hhl_fm.png">
        <source src="/stamp/sp/hhl.mp4" type="video/mp4">
        您的浏览器不支持视频播放
    </video>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const video = document.getElementById('myVideo');
        const container = document.getElementById('videoContainer');

        // 处理全屏函数
        function requestFullscreen() {
            if (container.requestFullscreen) {
                container.requestFullscreen().catch(console.error);
            } else if (container.webkitRequestFullscreen) { // Safari
                container.webkitRequestFullscreen();
            } else if (container.mozRequestFullScreen) { // Firefox
                container.mozRequestFullScreen();
            } else if (container.msRequestFullscreen) { // IE/Edge
                container.msRequestFullscreen();
            }
        }

        // 自动播放处理
        const playPromise = video.play();
        if (playPromise !== undefined) {
            playPromise
                .then(() => {
                    // 移动端处理（iOS需要特殊处理）
                    if ('webkitPresentationMode' in video) {
                        video.webkitSetPresentationMode('fullscreen');
                    }
                    requestFullscreen();
                })
                .catch(error => {
                    // 自动播放被阻止时显示控制条
                    video.controls = true;
                    console.warn('自动播放被阻止:', error);
                });
        }

        // 点击视频尝试全屏（备用方案）
        video.addEventListener('click', requestFullscreen);

        // 横屏提示（针对移动端）
        if (/Android|iPhone|iPad/i.test(navigator.userAgent)) {
            const rotateNotice = document.createElement('div');
            rotateNotice.style = `
                    position: fixed;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    color: white;
                    font-size: 1.2em;
                    text-align: center;
                    z-index: 100;
                    display: none;
                `;
            //rotateNotice.innerHTML = '请横屏观看以获得最佳体验';
            document.body.appendChild(rotateNotice);

            // 检测横竖屏
            function checkOrientation() {
                if (window.matchMedia("(orientation: portrait)").matches) {
                    rotateNotice.style.display = 'block';
                } else {
                    rotateNotice.style.display = 'none';
                }
            }
            window.addEventListener('resize', checkOrientation);
            checkOrientation();
        }
    });
</script>
</body>
</html>